<template>
	<view style="padding-bottom: 150rpx;">
		<view class="mainpadding flexbetween">
			<view class="flexleft">
				<u-icon name="integral" color="#e95951" size="16"></u-icon>
				<view class="strongtext xiaohui">{{$t("car.top1")}}</view>
			</view>
			<view class="flexleft">
				<u-icon name="integral" color="#e95951" size="16"></u-icon>
				<view class="strongtext xiaohui">{{$t("car.top2")}}</view>
			</view>
			<view class="flexleft">
				<u-icon name="integral" color="#e95951" size="16"></u-icon>
				<view class="strongtext xiaohui">{{$t("car.top3")}}</view>
			</view>
		</view>
		<view class="mainpadding ffffff" v-if="gouwcnr.length">
			<view class="flexleft xiahuaxian" v-for="item in gouwcnr" :key="item.id" @click="selectitem(item)">
				<u-icon name="checkmark-circle-fill"  v-if="item.is_checked" class="margin_right2" color="#e95951" size="28"></u-icon>
				<u-icon name="checkmark-circle-fill"  v-if="!item.is_checked" class="margin_right2" color="#999" size="28"></u-icon>
				<image :src="item.picUrl" class="leftListimg margin_right3" mode=""></image>
				<view class="flexcolumbet" style="width: 100%;height: 150rpx;align-items: flex-start;">
					<view class="yhxkla xiankuan xiaohei titletext">{{item.goodsName}}</view>
					<view class="yhxkla xiankuan xiaohei strongtext">{{item.specifications.join()}}</view>
					<view class="flexbetween" style="width: 100%;">
						<view class="xiaohei titletext">￥{{item.price}}</view>
						<u-number-box button-size="36" @change="changenum($event,item)" :asyncChange="true"
							color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
							v-model="item.number"></u-number-box>
					</view>
				</view>
			</view>
			
		</view>
		<view class="flexbetween gudingdb ffffff" style="bottom: 100rpx;padding: 5rpx 30rpx;" v-if="gouwcnr.length">
			<view class="flexleft"  @click="xiaoshi()">
				<u-icon name="checkmark-circle-fill" class="margin_right2" v-if="quan" color="#e95951" size="28"></u-icon>
				<u-icon name="checkmark-circle-fill" class="margin_right2" v-if="!quan" color="#999" size="28"></u-icon>
				<view class="xiaohei main_size">{{$t("car.qx")}}（{{isall_check}}）￥{{allprice}}</view>
			</view>
			<view class="flexright">
				<view class="bigbtn margin_right2" style="min-width: 150rpx;" @click="is_bj=!is_bj" v-if="!is_bj">{{$t("car.bj")}}</view>
				<view class="bigbtn margin_right2" style="min-width: 150rpx;" @click="is_bj=!is_bj" v-if="is_bj">{{$t("car.wc")}}</view>
				<view class="bigbtn"style="min-width: 150rpx;background-color: #9a9ba1;" v-if="!is_bj">{{$t("car.xd")}}</view>
				<view class="bigbtn"style="min-width: 150rpx;background-color: #9a9ba1;" v-if="is_bj" @click="scgwc">{{$t("car.sc")}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				quan: false,
				gouwcnr: [], //购物车列表内容
				allprice: 0,
				guanliflag: true,
				is_login:false,
				isall_check:0,
				is_bj:false
			}
		},
		onShow() {
			this.is_bj = false
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.gwclb()
			} else {
				this.gouwcnr = []
			}
		},
		watch: {
			gouwcnr: {
				handler(newValue, oldValue) {
					let isall_check = 0
					let allprice = 0
					newValue.forEach(item => {
						if (item.is_checked) {
							allprice = allprice + Number(item.price) * Number(item.number)
							isall_check = isall_check + 1
						}
					})
					this.allprice = allprice
					this.isall_check = isall_check
					if (isall_check == this.gouwcnr.length) {
						this.quan = true
					} else {
						this.quan = false
					}
				},
				deep: true
			}
		},
		methods: {
			changetab(e) {
				this.data_type = e.value
				this.gouwcnr = []
				this.gwclb()
			},
			buy() {
				let data = {
					type: "cart", //detail=商品详情,cart=购物车
					order_type:2,
					data: []
				}
				let num = 0
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.data.push({
							goods_id: item.goods_id,
							number: item.number,
							sku_id: item.sku_id,
						})
						num = num + 1
					}
				})
				if (num == 0) {
					httpRequest.toast(this.$t("car.xzsp"))
					return
				}
				uni.navigateTo({
					url: '/pages_homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 跳转商品详情
			goGoodsInfo(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpxq?id=' + id
				})
			},
			// 删除购物车
			scgwc() {
				let data = []
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.push(item.productId)
					}
				})
				if(data.length==0){
					return false
				}
				httpRequest.request('/wx/cart/delete', 'POST', {
					productIds:data,
				}, false, false, true).then(res => {
					httpRequest.toast(res.errmsg)
					if (res.errno == 0) {
						this.gwclb()
					}
				})
			},
			// 购物车列表接口
			gwclb() {
				httpRequest.request('/wx/cart/index', 'GET', {
				}, false, false, true).then(res => {
					if (res.errno == 0) {
						res.data.cartList.forEach(item => {
							this.$set(item, "is_checked", false)
						})
						this.gouwcnr = res.data.cartList
					}
				})
			},
			changenum(e, item) {
				item.number = e.value
				httpRequest.request('/wx/cart/update', 'POST', {
					goodsId: item.goodsId,
					id:item.id,
					number: e.value,
					productId:item.productId
				}, false, false, true).then(res => {
					if (res.errno != 0) {
						httpRequest.toast(res.errmsg)
					}
				})
			},
			selectitem(item) {
				console.log(item);
				item.is_checked = item.is_checked ? false : true
			},
			// 立即购买
			atonceBuy() {
				let data = {
					msg: [],
					type: "cart" //car购物车，detail详情
				}
				this.gouwcnr.forEach(item => {
					if (item.is_checked) {
						data.msg.push({
							goodsId: item.id,
							specType: 0,
							num: item.number
						})
					}
				})
				if (data.msg.length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/gouwuche/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
				})

			},
			xiaoshi() {
				if (this.quan) {
					this.quan = false
					this.gouwcnr.forEach(item => {
						item.is_checked = false
					})
				} else {
					this.quan = true
					this.gouwcnr.forEach(item => {
						item.is_checked = true
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
.leftListimg{
	width: 150rpx;
	min-width: 150rpx;
	height: 150rpx;
}
</style>
